<template>
  <div class="boxpeople">
    <van-nav-bar
      title="名人堂"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      :border="false"
    />
    <div class="boxpeople-text">
      <div
        v-for="item in list"
        :key="item.id"
        :style="`background-image: url(${item.img})`"
      >
        <span
          >&emsp;<img :src="item.images" alt="" />&emsp;{{ item.text }}</span
        >
        <span>{{ item.content }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/31.png"),
          text: "07月06日",
          content: "满眼故事",
        },
        {
          id: 2,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/32.png"),
          text: "07月05日",
          content: "错过",
        },
        {
          id: 3,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/44.jpeg"),
          text: "07月04日",
          content: "白云苍狗",
        },
        {
          id: 4,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/45.jpeg"),
          text: "07月03日",
          content: "灰太狼",
        },
        {
          id: 5,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/35.jpeg"),
          text: "07月02日",
          content: "灰灰",
        },
        {
          id: 6,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/36.jpeg"),
          text: "07月01日",
          content: "Domer",
        },
        {
          id: 7,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/37.jpeg"),
          text: "06月06日",
          content: "蓝忘机",
        },
        {
          id: 8,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/38.png"),
          text: "03月06日",
          content: "错过",
        },
        {
          id: 9,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/39.png"),
          text: "07月18日",
          content: "魏无羡",
        },
        {
          id: 10,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/40.jpeg"),
          text: "07月06日",
          content: "红暮",
        },
        {
          id: 11,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/41.jpeg"),
          text: "07月23日",
          content: "揽月",
        },
        {
          id: 12,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/42.jpeg"),
          text: "07月10日",
          content: "居夏",
        },
        {
          id: 13,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/43.jpeg"),
          text: "05月06日",
          content: "灰灰",
        },
        {
          id: 14,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/44.jpeg"),
          text: "04月06日",
          content: "满眼是你",
        },
        {
          id: 15,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/45.jpeg"),
          text: "01月06日",
          content: "蓝忘机",
        },
        {
          id: 16,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/31.png"),
          text: "10月06日",
          content: "小城故事",
        },
        {
          id: 17,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/38.png"),
          text: "12月06日",
          content: "刘德华",
        },
        {
          id: 18,
          images: require("@/assets/img/home/Home-img/mrthg.png"),
          img: require("@/assets/img/home/Home-img/36.jpeg"),
          text: "01月23日",
          content: "小可爱",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
.boxpeople {
  .van-nav-bar {
    line-height: 2.375rem;
    background-color: #1a1a1a;
    border: none;
  }
  .van-nav-bar__title {
    color: white;
    font-size: 32px;
  }
  .van-nav-bar__content {
    margin: 30px 0px;
  }
  .van-icon-arrow-left:before {
    color: white;
    font-size: 32px;
  }
  .boxpeople-text {
    // width: 630px;
    margin: 20px auto;
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }
  .boxpeople-text div {
    margin-left: 60px;
    width: 170px;
    height: 170px;
    margin-top: 60px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .boxpeople-text div span {
    display: block;
    width: 118px;
    height: 31px;
    color: white;
  }
  .boxpeople-text div span:nth-child(1) img {
    vertical-align: middle;
  }
  .boxpeople-text div span:nth-child(1) {
    border-radius: 16px 0px 16px 0px;
    padding-top: 7px;
    background-image: linear-gradient(
      to right,
      #ff7b76,
      rgba(255, 255, 255, 0.399)
    );
  }
  .boxpeople-text div span:nth-child(2) {
    width: 79px;
    height: 19px;
    text-align: center;
    line-height: 19px;
    margin: 0 auto;
  }
}
</style>